﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts河北省地图调用例子</title>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
    </style>
</head>
<body>
    <style type="text/css" media="all">
        .main {display: flex;}
        .main #main,.main #main1{width:50%}
    </style>
    <!--数据是json文件，不支持硬盘路径读取-->
   <div class="main">
        <div id="main" style="height:800px;"></div>
    <div id="main1" style="height:800px;"></div>
   </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        // 河北
        var chart = echarts.init(document.getElementById('main'));

        $.getJSON('js/hebei.json', function (data) {
            echarts.registerMap("河北省", data);
            var d = [];
            for (var i = 0; i < data.features.length; i++) {
                
                d.push({
                    name: data.features[i].properties.name,value:i
                })
            }
            console.log(d)
            renderMap("河北省", d);
        });

        var option = {
           
            title: {
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'+":"+'{c}'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                },
                iconStyle: {
                    normal: {
                        color: '#fff'
                    }
                }
            },
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            animationDurationUpdate: 1000

        };
        function renderMap(map, data) {
            // console.log(data)
            option.title.subtext = map;
            option.series = [
                {
                    name: map,
                    type: 'map',
                    mapType: map,
                    roam: false,
                    nameMap: {
                        'china': '中国'
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#999',
                                fontSize: 13
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 13
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: 'dodgerblue'
                        },
                        emphasis: {
                            areaColor: 'darkorange'
                        }
                    },
                    data: data
                }
            ];
            chart.setOption(option);
        }
         // 山西
        var chart1 = echarts.init(document.getElementById('main1'));

        $.getJSON('js/shanxi.json', function (data) {
            echarts.registerMap("山西省", data);
            var d = [];
            for (var i = 0; i < data.features.length; i++) {
                
                d.push({
                    name: data.features[i].properties.name,value:i
                })
            }
            console.log(d)
            renderMap1("山西省", d);
        });

        var option1 = {
           
            title: {
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'+":"+'{c}'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                },
                iconStyle: {
                    normal: {
                        color: '#fff'
                    }
                }
            },
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            animationDurationUpdate: 1000

        };
        function renderMap1(map, data) {
            // console.log(data)
            option1.title.subtext = map;
            option1.series = [
                {
                    name: map,
                    type: 'map',
                    mapType: map,
                    roam: false,
                    nameMap: {
                        'china': '中国'
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#999',
                                fontSize: 13
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 13
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: 'dodgerblue'
                        },
                        emphasis: {
                            areaColor: 'darkorange'
                        }
                    },
                    data: data
                }
            ];
            chart1.setOption(option1);
        }
    </script>
</body>
</html>
  